import React from 'react';
import { connect } from 'react-redux';
import * as testAction from '../../actions/test'
import { Row, Col, Avatar, Icon, Menu, Form, Card, Collapse } from 'antd';
import Style from './style';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <Row className="page">
                <Row className="block" style={{ padding: 10 }}>
                    <Col span={4}>
                        <Avatar
                            style={{ width: 100, height: 100 }}
                            src="https://files.gitee.com/group1/M00/08/0C/PaAvDF0BItWAOdfeAAONCOTAru8691.jpg?token=ad67b168ff4d70b509e680af011b0f82&ts=1560355542&attname=xzf.jpg&disposition=inline"
                        />
                    </Col>
                    <Col span={20}>
                        <div className="name">谢忠甫</div>
                        <Col span={12}>
                            <p className="desc"><Icon type="mobile" />15650712291</p>
                        </Col>
                        <Col span={12}>
                            <p className="desc"><Icon type="idcard" />xiezhongfujob@163.com</p>
                        </Col>
                        <Col span={12}><Form.Item style={{ marginBottom: 0 }}>北京科技大学(2012/09–2015/01)  量子化学/硕士</Form.Item></Col>
                        <Col span={12}><Form.Item style={{ marginBottom: 0 }}>北京科技大学(2007/09–2011/07)  应用化学/本科</Form.Item></Col>
                    </Col>
                </Row>
                <Row className="block">
                    <Menu selectedKeys={['book']}>
                        <Menu.Item key="book">
                            <Icon type="book" />工作经历
                        </Menu.Item>
                    </Menu>
                    <Row gutter={16}>
                        <Form.Item style={{ marginBottom: 0 }}><h3>国内某一线大厂 资深前端开发工程师 (2021.01 － 今)</h3></Form.Item>
                        <Collapse className="collapse markdown" defaultActiveKey={['1']}>
                            <Collapse.Panel header={<div><b>数据作业平台</b></div>} key="1">
                                <ul style={{ listStyleType: 'disc' }}>
                                    <li>学习 Vue 源码，学习数据作业的业务</li>
                                </ul>
                            </Collapse.Panel>
                        </Collapse>
                        <br/>
                    </Row>
                    <Row gutter={16}>
                        <Form.Item style={{ marginBottom: 0 }}><h3>华控清交 高级开发工程师 (2019.06 － 2020.12)</h3></Form.Item>
                        <Collapse className="collapse markdown" defaultActiveKey={['1']}>
                            <Collapse.Panel header={<div><b>项目交付</b></div>} key="1">
                                <ul style={{ listStyleType: 'disc' }}>
                                    <li>负责公司产品在客户侧的落地，适度升级改造产品。从前端的工作向项目交互工作转型</li>
                                    <li>负责 node gateway 的开发</li>
                                    <li>推动前端预渲染，微前端，BFF(Backend for Front)在产品中落地</li>
                                    <li>jupyter-lab 深度结合 React 的探索</li>
                                </ul>
                            </Collapse.Panel>
                        </Collapse>
                    </Row>
                    <Row gutter={16}>
                        <Form.Item style={{ marginBottom: 0 }}><h3>阿里高德 高级前端开发工程师 (2017.01 － 至今)</h3></Form.Item>
                        <Collapse className="collapse markdown" defaultActiveKey={['1']}>
                            <Collapse.Panel header={<div><b>数据中心生产管理 BI 系统</b>-项目前端负责人(团队4人)，承担架构设计 + 项目前端管理 + 前端开发</div>} key="1">
                                <ul style={{ listStyleType: 'disc' }}>
                                    <li>优化前端开发工具链；升级对接集团的k8s体系部署和运维</li>
                                    <li>采用BFF(Backend for Front)开发模式：前端基于 React；Node 层实现接口的转发/聚合，数据转换，登录鉴权等</li>
                                    <li>采用微前端架构，按组织架构和业务拆分庞大的业务系统为多个子系统</li>
                                    <li>基于 React 16 早期版本的时间线，自建主子应用的通信服务</li>
                                    <li>建立业务组件规范，组件日志收集，核定产品的落地实效。研发可视化页面搭建/发布的系统</li>
                                    <li>BFF(Serverless for Front)的探索</li>
                                    <li>less code 平台的探索</li>
                                </ul>
                            </Collapse.Panel>
                        </Collapse>
                    </Row>
                    <Row gutter={16}>
                        <Form.Item style={{ marginBottom: 0 }}><h3>乐视金融 前端开发工程师 (2016.06 － 2016.12)</h3></Form.Item>
                        <Collapse className="collapse markdown" defaultActiveKey={['1']}>
                            <Collapse.Panel header={<div><b>多端互金交易系统</b>-项目核心开发者</div>} key="1">
                                <ul style={{ listStyleType: 'disc' }}>
                                    <li>前端开发脚手架和组件库的建设</li>
                                    <li>带领团队从 jQuery 技术栈向 Vue 技术栈转型。因公司原因未完全落地。</li>
                                </ul>
                            </Collapse.Panel>
                        </Collapse>
                    </Row>
                    <Row gutter={16}>
                        <Form.Item style={{ marginBottom: 0 }}><h3>优贝在线 前端开发工程师 (2015.01 － 2016.06)</h3></Form.Item>
                        <Collapse className="collapse markdown" defaultActiveKey={['1']}>
                            <Collapse.Panel header={<div><b>多端视频直播系统</b>-项目核心开发者</div>} key="1">
                                <ul style={{ listStyleType: 'disc' }}>
                                    <li>基于 video.js 的视频直播组件</li>
                                    <li>带领团队从 jQuery 技术栈向 Vue 技术栈转型</li>
                                </ul>
                            </Collapse.Panel>
                        </Collapse>
                    </Row>
                </Row>
                <Row className="block">
                    <Menu selectedKeys={['book']}>
                        <Menu.Item key="book">
                            <Icon type="book" />个人近期动向
                        </Menu.Item>
                    </Menu>
                    <Row gutter={16}>
                        <Collapse className="collapse markdown" defaultActiveKey={['1', '2']}>
                            <Collapse.Panel header="http|node|chrome" key="1">
                                <ul style={{ listStyleType: 'disc' }}>
                                    <li><a href="https://www.yuque.com/xiezhongfu/http_node">https://www.yuque.com/xiezhongfu/http_node</a></li>
                                    <li><a href="https://www.yuque.com/xiezhongfu/chrome">https://www.yuque.com/xiezhongfu/chrome</a></li>
                                </ul>
                            </Collapse.Panel>
                            <Collapse.Panel header="React 源码学习" key="2">
                                <ul style={{ listStyleType: 'disc' }}>
                                    <li><a href="https://www.yuque.com/xiezhongfu/react-16">https://www.yuque.com/xiezhongfu/react-16</a></li>
                                    <li><a href="https://juejin.cn/user/3491704661357703/pins">https://juejin.cn/user/3491704661357703/pins</a></li>
                                </ul>
                            </Collapse.Panel>
                        </Collapse>
                    </Row>
                </Row>
            </Row>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    const { list } = state.test;

    return {
        list,
    }
}

export default connect(mapStateToProps)(Test);